<template>
    <div class="category">
        <!-- 顶部搜索框 -->
        <TopSearch />
        <!-- 分类 -->
        <div class="category-wrap">
            <ul class="left">
                <li
                    :class="{'active':currentIndex == index}"
                    v-for="(item, index) in leftItem"
                    :data-index="index"
                    :key="item.id"
                    :data-id="item.id"
                    @click="handleClick"
                >
                    <a href="#">{{item.name}}</a>
                </li>
            </ul>

            <ul class="right">
                <li
                    v-for="(item, index) in rightItem"
                    :data-index="index"
                    :data-id="item.id"
                    v-bind:key="item.id"
                    v-on:click="handleJump"
                >
                    <a href="#">
                        <img src="@/assets/uploads/detail.jpg" />
                        <span class="text">{{item.name}}</span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 底部导航条 -->
        <NavBar :flag="route" />
    </div>
</template>

<script>
// @ is an alias to /src
import NavBar from "@/components/NavBar.vue";
import TopSearch from "@/components/TopSearch.vue";
import { getAllCategory, getChild, mockLeft, mockRight } from "@/api/category";
export default {
    name: "category",
    components: {
        NavBar,
        TopSearch
    },
    data() {
        return {
            route: "category",
            leftItem: [],
            rightItem: [],
            currentIndex: 3,
            currentId: 0,
            allRightData: []
        };
    },
    mounted() {
        this._loadData();
        this._renderleftItem();
    },
    methods: {
        _loadData() {},
        _renderleftItem() {
            //getChild()
            mockLeft().then(res => {
                console.log(res.data);
                this.leftItem = res.data;
                console.log("left");
                console.log(this.leftItem);
                this.currentId = this.leftItem[0].id;
                this._renderRightItem(this.currentId);
            });
            // this.leftItem = [
            //     { name: "家用电器", id: 1 },
            //     { name: "男装", id: 2 },
            //     { name: "女装", id: 3 },
            //     { name: "手机数码", id: 4 },
            //     { name: "旅行达人", id: 5 },
            //     { name: "母婴用品", id: 6 },
            //     { name: "电脑办公", id: 7 },
            //     { name: "家用电器", id: 8 },
            //     { name: "男装", id: 9 },
            //     { name: "女装", id: 10 },
            //     { name: "手机数码", id: 11 },
            //     { name: "图书音像", id: 12 },
            //     { name: "美装护肤", id: 13 },
            //     { name: "汽车生活", id: 14 }
            // ];
        },
        _renderRightItem(id) {
            console.log("右侧内容的所属分类id号:" + id);
            //getChild()
            mockRight(id).then(res => {
                console.log(res.data);
                this.rightItem = res.data;
            });
            // this.rightItem = ["aa", "bb", "cc", "dd", "ee", "ff"];
        },
        handleClick(event) {
            console.log(event.currentTarget.dataset);
            const { index, id } = event.currentTarget.dataset;
            this.currentIndex = index;
            this.currentId = id;
            this._renderRightItem(this.currentId);
        },
        handleJump(event) {
            console.log("handleJump::" + event);
        }
    }
};
</script>

<style lang="scss">
.category {
    padding: 0;
    margin: 44px 0 0 0;
    box-sizing: border-box;
    width: 100%;
    .category-wrap {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 54px;
        padding-left: 0px;
        margin: 0;
        background-color: #fff;
        .left {
            flex: 2;
            // width: 76px;
            // 此处的98px是底部导航条和底部搜索框的高度之和
            height: calc(100vh - 98px);
            margin: 0;
            padding: 0;
            list-style-type: none;
            background: #f8f8f8;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            &::-webkit-scrollbar {
                display: none;
            }
            li {
                text-align: center;
                a {
                    width: 100%;
                    height: 46px;
                    line-height: 46px;
                    text-decoration: none;
                    color: #333333;
                    font-size: 14px;
                }
            }
            .active {
                background-color: #fff;
                a {
                    color: #e9453d;
                }
            }
        }

        .right {
            flex: 5;
            // 此处的98px是底部导航条和底部搜索框的高度之和
            height: calc(100vh - 98px);
            background-color: #fff;
            padding: 0;
            margin: 0;
            list-style-type: none;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;

            &::-webkit-scrollbar {
                display: none;
            }
            li {
                width: 33.33%;
                padding: 54px 0px;
                a {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    width: 70px;

                    img {
                        // flex: 3;
                        width: 100%;
                        // width: 70px;
                        // height: 70px;
                    }
                    .text {
                        // flex: 1;
                    }
                }
            }
        }
    }
}
</style>